<template>

  <el-dialog
    width="80%"
    :close-on-click-modal="true"
    :before-close="cancel"
    :visible.sync="visible">
    <el-card class="box-card" v-for="(item,i) in questions" :key="'questions'+item.id">
      <div class="text item">
        <p class="questions_content">{{i+1}}.{{ item.text }}</p>

        <div v-if="item.questionType === '1'">
          <el-radio-group v-model="radioValues[item.id]">
            <el-radio class="answer_checkbox" v-for="an in item.questionAnswerList" :key="'an'+an.id" :label="an.id">
              {{ an.text }}
            </el-radio>
          </el-radio-group>

          <el-row :gutter="24">
            <el-col :span="12" style="color: #24da70">
              正确答案：{{ radioRights[item.id] }}
            </el-col>
            <el-col v-if="!item.answered" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：未答
            </el-col>
            <el-col v-if="item.answered && !item.isRight" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：{{ myRadio[item.id] }}
            </el-col>
            <el-col v-if="item.answered && item.isRight" :span="12" style="text-align: right; color: #24da70;">
              答题结果：{{ myRadio[item.id] }}
            </el-col>
          </el-row>


        </div>

        <div v-if="item.questionType === '2'">
          <el-checkbox-group v-model="multiValues[item.id]">
            <el-checkbox class="answer_checkbox" v-for="an in item.questionAnswerList" :key="'Answer'+an.id"
                         :label="an.id">{{ an.text }}
            </el-checkbox>
          </el-checkbox-group>
          <el-row :gutter="24">
            <el-col :span="12" style="color: #24da70">
              正确答案：{{ multiRights[item.id].join(',') }}
            </el-col>
            <el-col v-if="!item.answered" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：未答
            </el-col>
            <el-col v-if="item.answered && !item.isRight" :span="12" style="text-align: right; color: #ff0000;">
              答题结果：{{ myMulti[item.id].join(',') }}
            </el-col>
            <el-col v-if="item.answered && item.isRight" :span="12" style="text-align: right; color: #24da70;">
              答题结果：{{ myMulti[item.id].join(',') }}
            </el-col>
          </el-row>
        </div>
        <p>解析：</p>
        <p class="questions_content">{{item.analysis}}</p>

      </div>
    </el-card>


  </el-dialog>


</template>

<script>
  export default {
    props: {
      questions: { type: Array, default: [] },
      visible: {
        type: Boolean,
        default: false
      }
    },
    name: 'question-result',
    data() {
      return {
        radioValues: {},
        multiValues: {},
        radioRights: {},
        multiRights: {},
        myRadio: {},
        myMulti: {}
      }
    }, created() {
      this.questions.forEach((item) => {
        let radioValue = ''
        let radioRight = ''
        let myRadio = ''
        const multiValue = []
        const multiRight = []
        const myMulti = []
        item.questionAnswerList.forEach((an) => {
          // 用户选定的
          if (an.checked === '1') {
            if (item.questionType === '1') {
              radioValue = an.id

              myRadio = an.text.slice(0, 1)
            } else {
              multiValue.push(an.id)
              myMulti.push(an.text.slice(0, 1))
            }
          }

          // 正确答案
          if (an.status === '1') {
            if (item.questionType === '1') {
              radioRight = an.text.slice(0, 1)
            } else {
              multiRight.push(an.text.slice(0, 1))
            }
          }
        })

        this.multiValues[item.id] = multiValue
        this.radioValues[item.id] = radioValue
        this.radioRights[item.id] = radioRight
        this.multiRights[item.id] = multiRight
        this.myRadio[item.id] = myRadio
        this.myMulti[item.id] = myMulti
      })
    }, methods: {
      cancel() {
        this.$emit('handleClose', { component: 'openPaper' })
      }
    }
  }
</script>

<style scoped>
  .box-card {
    margin-top: 10px;
  }

  .answer_checkbox {
    display: block;
    margin-left: 0;
  }

  .questions_content {
    white-space: pre-wrap;
    margin: 0 0 6px 0;
    padding: 0;
    line-height: 1em;
  }
</style>
